<!-- 明细表格 -->

<template>
  <WebTable path="detail" class="ReportAttendance-MyTableDetail">
    <RowText label="姓名" bind="userName" v-bind="rowProps" />

    <RowPhone label="手机" bind="userPhone" v-bind="{ width: 'auto', ...rowProps }" />

    <RowChildren
      v-for="{ day, week } in detail_MAP.DAY_LIST"
      :key="day"
      :label="`${day} ${week}`"
      :bind="day"
      v-bind="rowProps"
      multiRow
    >
      <template #item="{ item, text }">
        <div v-if="item.id === 1">{{ text }}</div>
        <div v-if="item.id === 2">
          <span class="auto PrimaryBgColor">上</span>
          <span class="width" :class="getClass(item)">{{ getText(item) }}</span>
        </div>
        <div v-if="item.id === 3">
          <span class="auto SuccessBgColor">下</span>
          <span class="width" :class="getClass(item)">{{ getText(item) }}</span>
        </div>
      </template>
    </RowChildren>
  </WebTable>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTableDetail',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('detail', 'detail_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 行属性
     */
    rowProps() {
      const hasWidth = this.detail_MAP.DAY_LIST.length > 6
      return hasWidth ? { width: 160 } : { minWidth: 160 }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取样式类
     */
    getClass(item) {
      return item.status === 1 ? 'SuccessColor' : 'DangerColor'
    },

    /**
     * 获取文本
     */
    getText({ time, statusName }) {
      const middle = time && statusName ? '　' : ''
      return `${time}${middle}${statusName}`
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
